<template>
  <div class="edit-down-pulldown"  remark="下拉日期组件" ref="xDown"    >
    <el-tooltip class="item" effect="dark" :content="tipMsg" placement="top"
                :manual="true"
                v-model="tipShow"
                popper-class="tip-warn-autowidth"
    >
      <el-date-picker  type="date" :format="dates.defaultDatePattern"
                       :picker-options="dateOption"
                       :validate-event="false"
                       ref="myDate"
                       class="my-dropdown-date"
                       @change="dateChange(true)"
                       @focus="afterFocus"
                       v-model="selectValue"
                       placeholder="请选择"
      />
    </el-tooltip>
  </div>
</template>

<script>
/*eslint-disable*/
import utilDataview from "../../util/utilDataview";

export default {
  title: '日期控件',
  name: 'FortenVxeDate',
  props: {
    params: Object,
    renderOpts: Object
  },
  data() {
    return {
      selectValue: '',
      dateValue: '',
      data: [],
      property: {},
      renderProps: {},
      isInit: false,
      isToNext: true,
      dateOption: {    //日期快捷选择项
        disabledDate(time) {
        },
      },
      selectValue: '',
      tipMsg: '',
      tipShow:  false
    }
  },
  methods: {
    bindValue() {
      this.selectValue = this.params.row[this.params.column.property]
    },

    setColumnValue() {
      let valueColumn = this.dates.toDate(this.params.row[this.params.column.property], 'yyyy-MM-dd')
      if (valueColumn != this.selectValue) {
        this.params.row[this.params.column.property] = this.dates.toDate(this.selectValue, 'yyyy-MM-dd')
      }
    },
    //改变事件
    showTip(msg) {
      this.tipShow = true
      this.tipMsg = msg
      this.toFocus()
      setTimeout(() => {
        this.tipShow = false
      }, 5000)
    },
    //日期选择后  面板选择会触发，但是文本框改变不会触发
    dateChange(isByPanel) {
      if (!this.isInit) {
        return
      }
      if (isByPanel && isByPanel == true) { //面板点击重新聚焦
      }
      //解析年月日  20121202
      this.selectValue = this.strings.trimrl(this.strings.defaultString(this.selectValue,''))
      this.isToNext = true
      if (this.strings.isNotBlank(this.selectValue)) {
        if (this.selectValue.length == 8) {
          let valueNew = this.selectValue.substring(0,4) + '-' +this.selectValue.substring(4,6) + '-' + this.selectValue.substring(6,8)
          if (!this.dates.isDate(valueNew)) {
            this.isToNext = false
            this.showTip('输入的日期格式非法,格式： 20121212 或者 2012-12-12')
            return
          }
          this.selectValue = valueNew
        } else {
          if (!this.dates.isDate(this.selectValue)) {
            this.isToNext = false
            this.showTip('输入的日期格式非法,格式： 20121212 或者 2012-12-12')
            return
          }
        }

        let msg = this.utilDataview.validFortenVxeDate(this.renderOpts.props.dataview.viewKeyDb, this.params.column.property, this.selectValue)
        if (this.strings.isNotBlank(msg)) {
          this.isToNext = false
          this.showTip(msg)
          return
        }
        this.setColumnValue()
      }
    },

    closePanel() {
      try {
        this.$refs.myDate.handleClose()
      }catch (e) {

      }
    },

    //切换到下一个单元格
    toNext() {
      if (!this.isToNext) {
        return
      }
      this.renderOpts.props.dataview.activeNext()

      //左右方向键切换无法关闭的问题
      this.closePanel()
    },

    //聚焦文本框
    toFocus() {
      $(this.$refs.myDate.$el).children('input').focus()
    },
    //聚焦后
    afterFocus(param) {
      let that = this
      this.bindValue()
      if (!this.isInit) {
        //回车事件,切换下一个单元格
        $(this.$refs.myDate.$el).children('input').keydown(function(event){
          console.log('keydown')
          if(event.keyCode == "13")
          {
            that.dateChange(true)
            that.toNext()
          }
        })

        //键盘释放，解决文本框输入无法更新值的问题
        $(this.$refs.myDate.$el).children('input').keyup(function(event){
          if(event.keyCode != "13")
          {
            that.selectValue = $(this).val()
          }
        })

        //失去焦点，触发保存
        $(this.$refs.myDate.$el).children('input').blur(function(event){
          that.dateChange()

          //左右方向键切换无法关闭的问题
          setTimeout(() => {
            that.closePanel()
          }, 500)
        })

        //这个判断是为了解决多个本组件，首次加载也会触发dateChange的问题
        setTimeout(() => {
          this.isInit = true
        }, 500)
      }
    },
  },
  created() {
    this.bindValue()
  }
}
</script>

<style lang="scss" scoped>
  /*更改dataview样式*/
  .my-dropdown-date /deep/{
    width: 100% !important;
    /deep/ .el-date-picker{
      .el-input__inner{
        display: none !important;

      }
    }
    .el-input__inner {
      height: 25px !important;
      line-height: 25px !important;
    }
    .el-input__prefix,.el-input__suffix{
      top: -3px !important;
    }
  }
</style>
